<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>es6-proxy</title>
  </head>
  <body>
    <script>
      /* // 定义一个空对象
      let data = {}
      // 创建一个 Proxy , 将 data 作为目标对象
      let proxy = new Proxy(data, {})
      // 修改Proxy 代理对象的name属性
      proxy.name = '阿良'
      console.log(proxy) // { name: '阿良' }
      console.log(data) // { name: '阿良' } */

      /* // 定义一个对象
      let data = {
        name: '阿良',
        age: '23',
      }
      // 创建一个 Proxy , 将 data 作为目标对象
      let p = new Proxy(data, {
        // target = 目标对象
        // prop = 设置的属性
        // value = 修改后的值
        set(target, prop, value) {
          console.log(target, prop, value) // { name: '阿良', age: '24' } 'age' 18
          // 修改赋值
          target[prop] = value
        },
      })
      // 直接修改p就可以了
      p.age = 18
      console.log(data) // { name: '阿良', age: '18' } */

      let data = {
        name: '阿良',
        age: '24',
      }

      let p = new Proxy(data, {
        get(target, prop) {
          // target = 目标对象
          // prop = 获取的属性
          console.log(target, prop)
          // { name: '阿良', age: '24' } 'age'
          return Reflect.get(...arguments)
          // 这里的 Reflect.get 我们在上面已经讲到了
        },
      })
      // 获取
      console.log(p.age)
      // 24
    </script>
  </body>
</html>
